<template>
  <view class="custom-tabBar">
    <view class="tabs-list">
      <view
        class="tabs-item"
        v-for="(item, index) in items"
        :class="{ 'tabs-item_active': index === selectedIndex }"
        :key="item.key"
        @click="hanldeActice(index, item)"
      >
        <image class="icon_image" :src="item.icon" mode="aspectFit" :draggable="false"></image>
        <view class="label">
          {{ item.label }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedIndex: uni.getStorageSync("tab_bar_selected_index") || 0,
      items: [
        { key: "index", label: "首页", pagePath: "pages/index", icon: require("@/static/images/tabbar/home.png") },
        {
          key: "work",
          label: "工作台",
          pagePath: "pages/work/index",
          icon: require("@/static/images/tabbar/work.png"),
        },
        {
          key: "profileInfo",
          label: "我的",
          pagePath: "pages/mine/index",
          icon: require("@/static/images/tabbar/mine.png"),
        },
      ],
    };
  },

  methods: {
    hanldeActice(_, item) {
      const index = this.items.findIndex(({ pagePath }) => pagePath === item.pagePath);
      uni.setStorageSync("tab_bar_selected_index", index);
      this.$tab.switchTab(`/${item.pagePath}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-tabBar {
  width: 100%;
  height: 50px;
  z-index: 100;
  position: relative;
  box-sizing: border-box;
  min-height: 50px;
  max-height: 50px;
  background-color: #fff;
  border-top: 1px solid #eee;

  // left: 0px;
  // bottom: 0px;
  // position: fixed;

  .tabs-list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    // padding-bottom: 2px;
    box-sizing: border-box;
    text-align: center;

    .tabs-item {
      padding: 4px 0px;
      box-sizing: border-box;
      width: max-content;
      white-space: nowrap;
      margin: 0 auto;
      background-color: #fff;
      transition: all 0.3s;

      .icon_image {
        width: 16px;
        height: 16px;
      }

      .label {
        font-size: 10px;
      }
    }

    .tabs-item_active {
      color: #409eff;
    }

    .tabs-item_animated {
      width: 0px;
      bottom: 0;
      height: 2px;
      z-index: 1;
      position: absolute;
      background-color: #409eff;
      transform: translateX(0px);
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
  }
}
</style>
